<template>
	<view class="course-form">
		<view class="form-box">
			<u-form :label-style='style' label-position='top' :error-type="errorType" :model="form" ref="uForm">
				<u-form-item label="会员类型" prop="typeName">
					<u-input :disabled='true' placeholder='请选择会员类型' v-model="form.declareName" type="select" />
				</u-form-item>
				<u-form-item label="姓名" prop="name">
					<u-input v-model="form.name" placeholder='请输入您的姓名' />
				</u-form-item>
				<u-form-item label="头像" prop="picture">
					<u-upload @on-success='onSuccess' :header='header' :action='action' :show-upload-list='false' :custom-btn="true">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<view class="up-img" v-if="!form.picture">
								<view class="img-box">

								</view>
								<u-icon class='icon' name="plus" color="#fff" size="28"></u-icon>
							</view>
							<image v-else class="img" :src="baseImgUrl+form.picture" mode=""></image>
						</view>
					</u-upload>
				</u-form-item>
				<u-form-item label="性别" prop="sex">
					<u-input :disabled='true' placeholder='请选择性别' @click="accountTypeShow = true" v-model="form.sex" type="select" />
				</u-form-item>
				<u-select @confirm='confirm' title='选择性别' v-model="accountTypeShow" :list="accountType"></u-select>
				<u-form-item label="出生日期" prop="birthday">
					<u-input :disabled='true' placeholder='请选择出生日期' @click="birthdayShow = true" v-model="form.birthday" type="select" />
				</u-form-item>
				<u-calendar active-bg-color='#0050A5' btn-type='jz' v-model="birthdayShow" @change="changeBirthday"></u-calendar>
				<u-form-item label="民族" prop="spared1">
					<u-input v-model="form.spared1" placeholder='请输入民族' />
				</u-form-item>
				<u-form-item label="籍贯" prop="nativePlace">
					<u-input v-model="form.nativePlace" placeholder='请输入籍贯' />
				</u-form-item>
				<u-form-item label="政治面貌" prop="politicalStatus">
					<u-input v-model="form.politicalStatus" placeholder='如:党员,群众...' />
				</u-form-item>
				<u-form-item label="职称" prop="jobTitle">
					<u-input v-model="form.jobTitle" placeholder='请输入职称' />
				</u-form-item>
				<u-form-item label="学历" prop="educationalLevel">
					<u-input v-model="form.educationalLevel" placeholder='请输入学历' />
				</u-form-item>
				<u-form-item label="毕业院校" prop="shoolName">
					<u-input v-model="form.shoolName" placeholder='请输入毕业院校' />
				</u-form-item>
				<u-form-item label="所学专业" prop="professional">
					<u-input v-model="form.professional" placeholder='请输入所学专业' />
				</u-form-item>

				<u-form-item label="身份证号码" prop="idNumber">
					<u-input type='number' v-model="form.idNumber" placeholder='请输入身份证号码' />
				</u-form-item>
				<u-form-item label="E-mail" prop="emailQq">
					<u-input v-model="form.emailQq" placeholder='请输入E-mail' />
				</u-form-item>
				<u-form-item label="单位名称" prop="companyName">
					<u-input v-model="form.companyName" placeholder='请输入单位名称' />
				</u-form-item>
				<u-form-item label="单位职务" prop="position">
					<u-input v-model="form.position" placeholder='请输入单位职务' />
				</u-form-item>
				<u-form-item label="联系电话" prop="contactPhone">
					<u-input type='number' v-model="form.contactPhone" placeholder='请输入联系电话' />
				</u-form-item>
				<u-form-item label="传真" prop="faxes">
					<u-input type='number' v-model="form.faxes" placeholder='请输入传真' />
				</u-form-item>
				<u-form-item label="手机" prop="principalPhone">
					<u-input type='number' v-model="form.principalPhone" placeholder='请输入手机' />
				</u-form-item>
				<u-form-item label="通讯地址" prop="companyAddress">
					<u-input v-model="form.companyAddress" placeholder='请输入通讯地址' />
				</u-form-item>
				<u-form-item label="邮编" prop="postcode">
					<u-input v-model="form.postcode" placeholder='请输入邮编' />
				</u-form-item>
				<u-form-item label="类别" prop="applyCategory">
					<u-checkbox-group @change="checkboxGroupChange" max='3'>
						<u-checkbox active-color="#0050A5" @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list"
						 :key="index" :name="item.name">{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</u-form-item>

				<u-form-item label="工作简历" prop="jobResume">
					<u-input v-model="form.jobResume" placeholder='请输入工作简历' />
				</u-form-item>
				<u-form-item label="工作业绩" prop="workPerformance">
					<u-input v-model="form.workPerformance" placeholder='请输入工作简历' />
				</u-form-item>
			</u-form>
		</view>
		<view class="btn-box">
			<u-button ripple="" type='jz' @click="submit">下一步</u-button>
		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		baseImgUrl
	} from '@/config/config.js'
	export default {
		props: {
			vipTypeList: {
				type: Array,
				default: () => []
			},
			status: {
				default: null
			}
		},
		data() {
			return {
				header: {
					Authorization: this.cache.getCache('userCode')
				},
				baseImgUrl: baseImgUrl,
				action: baseURL + '/uploadDownload/api/imgUpload',
				list: [{
						name: '景观设计师',
						checked: false,
					},
					{
						name: '室内建筑师',
						checked: false,
					},
					{
						name: '展览展示设计师',
						checked: false,
					},
					{
						name: '住宅室内设计师',
						checked: false,
					},
					{
						name: '陈设艺术设计师',
						checked: false,
					}
				],
				birthdayShow: false,
				accountTypeShow: false,
				showVipType: false,
				accountType: [{
						label: '女',
						value: '0'
					},
					{
						label: '男',
						value: '1'
					},
				],
				form: {
					educationalLevel: '',
					applyCategory: '',
					name: '',
					speciality: '',
					companyName: '',
					sex: '',
					companyAddress: '',
					postcode: '',
					birthday: '',
					spared1: '',
					nativePlace: '',
					politicalStatus: '',
					jobTitle: '',
					shoolName: '',
					professional: '',
					idNumber: '',
					emailQq: '',
					principalPhone: '',
					picture: '',
					professionalCategory: '',
					productionName: '',
					companyName: '',
					position: '',
					faxes: '',
					jobResume: '',
					contactPhone: '',
					workPerformance: ''
				},
				errorType: ['border-bottom', 'toast', 'message'],
				style: {
					color: '#303030',
					fontWeight: 'bold'
				},
				rules: {
					applyCategory: [{
						required: true,
						message: '请选择类别',
						trigger: ['change', 'blur'],
					}],
					position: [{
						required: true,
						message: '请输入单位职务',
						trigger: ['change', 'blur'],
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur'],
					}],
					companyName: [{
						required: true,
						message: '请输入单位名称',
						trigger: ['change', 'blur'],
					}],
					principalPhone: [{
						validator: (rule, value, callback) => {
							var reg = /^(?:(?:\+|00)86)?1\d{10}$/
							if (!value) {
								callback()
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('手机号格式不正确'));
							}
						},
						trigger: ['change', 'blur'],
					}],
					contactPhone: [{
						validator: (rule, value, callback) => {
							var reg = /^(?:(?:\+|00)86)?1\d{10}$/
							if (!value) {
								callback(new Error('请输入手机号'));
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('手机号格式不正确'));
							}
						},
						trigger: ['change', 'blur'],
					}],
					emailQq: [{
						validator: (rule, value, callback) => {
							var reg =
								/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
							if (!value) {
								callback(new Error('请输入邮箱'));
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('邮箱格式不正确'));
							}
						},
						trigger: ['change', 'blur'],
					}],
					name: [{
							required: true,
							message: '请输入您的姓名',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
							transform(value) {
								return String(value);
							},
							message: '姓名不能输入数字和特殊符号'
						},
					],
					companyAddress: [{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请输入通讯地址'));
							} else if (value.length <= 2) {
								callback(new Error('通讯地址不得少于三位字符'));
							} else {
								callback()
							}
						},
						trigger: ['change', 'blur'],
					}],
					politicalStatus: [{
						validator: (rule, value, callback) => {
							//非必填,填写触发验证
							var reg =
								/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/
							if (!value) {
								callback()
							}
							if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('政治面貌必须为中文'))
							}
						},
						trigger: ['change', 'blur'],
					}],
					idNumber: [{
						validator: (rule, value, callback) => {
							//非必填,填写触发验证
							var reg = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/

							if (!value) {
								callback()
							}
							if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('身份证格式不正确'))
							}
						},
						trigger: ['change', 'blur'],
					}],
					spared1: [{
						validator: (rule, value, callback) => {
							//非必填,填写触发验证
							var reg =
								/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/
							if (!value) {
								callback()
							}
							if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('民族必须为中文'))
							}
						},
						trigger: ['change', 'blur'],
					}],
					postcode: [{
						validator: (rule, value, callback) => {
							//非必填,填写触发验证
							var reg = /^(0[1-7]|1[0-356]|2[0-7]|3[0-6]|4[0-7]|5[1-7]|6[1-7]|7[0-5]|8[013-6])\d{4}$/
							if (!value) {
								callback()
							}
							if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('请输入正确的邮编格式'))
							}
						},
						trigger: ['change', 'blur'],
					}],
					speciality: [{
						validator: (rule, value, callback) => {
							//非必填,填写触发验证
							if (value && value.length <= 2) {
								callback(new Error('从事领域不得少于三位字符'));
							} else {
								callback()
							}
						},
						trigger: ['change', 'blur'],
					}]
				}

			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch: {},
		methods: {
			onSuccess(res) {
				this.form.picture = res.data
				console.log(res, '上传成功了吗')
			},
			checkboxGroupChange(e) {
				this.form.applyCategory = JSON.stringify(e)
				console.log(this.form.applyCategory);
			},
			checkboxChange(e) {


				// 
			},
			changeBirthday(val) {
				console.log(val)
				this.form.birthday = val.result
			},
			//选择性别
			confirm(val) {
				this.form.sex = val[0].label
				console.log(val)
			},
			handAccountType() {

			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						//选择会员类别
						let item = this.vipTypeList[0]
						console.log(item, this.vipTypeList)
						if (item) {
							this.form.price = item.price
							this.form.typeName = item.typeName
							this.form.vipTypeId = item.vipTypeId
							this.form.declareName = item.typeName
							this.form.signature2 = item.typeName
						}

						uni.navigateTo({
							url: '/pages/my/authVip/form/grVerify?form=' + JSON.stringify(this.form) + '&status=' + this.status
						})
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.course-form {
		.form-box {
			padding: 0 30rpx;
			padding-bottom: 200rpx;

			.account-text {
				color: $bs-color-theme;
				font-size: 24rpx;
				text-align: right;
				margin-top: 10rpx;
			}

			.img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.up-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				position: relative;
				overflow: hidden;

				.icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 3;
				}


				.img-box {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background: rgba(0, 0, 0, 0.5);
				}

				// &::after {
				// 	position: absolute;
				// 	top: 0;
				// 	left: 0;
				// 	width: 100%;
				// 	height: 100%;
				// 	content: '';
				// 	background: rgba(0, 0, 0, 0.5);
				// }
			}
		}

		.btn-box {
			background: #FFFFFF;
			box-shadow: 0 0 26px 0 rgba(18, 27, 83, 0.07);
			padding: 20rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 3;
		}
	}
</style>
